<template>
	<view class="notice-todo">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="notice-msg">
			<view class="msg-list">
				<view class="msg-item" v-for="(item,index) in list" :key="index" @click="detail(item)">
					<template v-if="item.type==2">
						<view class="msg-info">
							<view class="title">{{item.title}}</view>
							<view class="cell">
								<view class="cell-item">
									<text class="label">{{item.content}}</text>
								</view>
							</view>
							<view class="btn-group">
								<view class="btn" @click.stop="goPay(item.relation_id)">去付款</view>
							</view>
						</view>
					</template>
					<template v-if="item.type==3">
						<view class="msg-info">
							<view class="title">{{item.title}}</view>
							<view class="cell">
								<view class="cell-item">
									<text class="label">{{item.content}}</text>
								</view>
							</view>
							<view class="btn-group">
								<view class="btn" @click.stop="confirm(item.relation_id)">确认</view>
							</view>
						</view>
					</template>
				</view>

				<view v-if="list.length <= 0" style="text-align: center;margin-top: 30rpx;">
					<text>
						暂无数据~
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '待办消息',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		list: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.list = [{
			id: 1,
			title: '待付款',
			type: 2,
			content: '你有一个订单等待付款',
			relation_id: 1,
			create_time: '2025-09-05 16:09:41'
		}, {
			id: 2,
			title: '待确认',
			type: 3,
			content: '你有一个订单需要确认',
			relation_id: 2,
			create_time: '2025-09-05 16:09:41'
		}];
	}

	function goPay(id) {
		console.log('去付款', id);
	}

	function confirm(id) {
		console.log('确认', id);
	}

	function detail(item) {
		console.log('待办信息详情', item);
		pageRoute("/servePages/notice/todo-view/todo-view?id=" + item.id)
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.notice-todo {
		.notice-msg {
			overflow: hidden;
			margin-top: $m24;
			background-color: $u-bg-reverse-color;
			border-radius: $radius-12;

			.msg-list {
				padding: $m24;

				.msg-item {
					@include f-between;
					padding: $m24 0;
					border-bottom: 1px solid $u-border-color;

					&:last-child {
						border-bottom: none;
					}

					.msg-info {
						overflow: hidden;
						flex: 1;

						.title {
							font-size: 32;
							color: #313131;
							font-weight: bold;
						}

						.cell-item {
							@include f-between;
							padding: 8rpx 0;
							font-size: 24;
							color: #717171;

							.value {
								flex: 1;
								margin-left: $m12;
								color: #313131;
							}
						}

						.btn-group {
							display: flex;
							justify-content: flex-start;

							.btn {
								width: 120rpx;
								height: 50rpx;
								background: #125cd7;
								border-radius: 30rpx;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}
		}
	}
</style>